<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .padding {
            background-color: red;
            padding: 30px;
        }
        .margin {
            background-color: pink;
            margin: 50px;
        }
        video {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <!-- 
        行内 (display-inline) 和块级 (display-block) 元素区别如下 
            a 行内元素一行可以显示多个 块级独自占据一行
            b 块级元素可以包含行内  行内不能包含块级
            c 行内不能设置宽高 块级可以

     -->
     <span class="padding">设置了padding的行内元素</span>
     <span class="margin">设置了margin的行内元素</span>
     <!-- 声音 -->
     <audio src="https://www.iqiyi.com/v_1ml7j6puy64.html" controls ></audio>
     <!-- 视频 -->
     <video src="https://www.iqiyi.com/v_1ml7j6puy64.html" controls></video>

     <!-- 总结如下 
        行内元素的内边距只对左 右 下有作用 
        外边距只对左右两个方向有作用
    -->
    
    <script>
    
    </script>
</body>
</html>